<template>
  <div class="tabs">
    <!--查询区域-->
    <a-form layout="inline">
      <a-row class="search-content">
        <a-col :md="6" :sm="8">
          <a-form-item label="姓名">
            <a-input placeholder="请输入姓名" v-model="queryParams.name" />
          </a-form-item>
        </a-col>
        <a-col :md="6" :sm="8">
          <a-form-item label="年龄">
            <a-input placeholder="请输入年龄" v-model="queryParams.age" />
          </a-form-item>
        </a-col>
        <template v-if="toggleSearchStatus">
          <a-col :md="6" :sm="8">
            <a-form-item label="生日">
              <a-input placeholder="请输入生日" v-model="queryParams.birthody" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="籍贯">
              <a-input placeholder="请输入籍贯" v-model="queryParams.nativePlace" />
            </a-form-item>
          </a-col>
        </template>
        <a-col :md="6" :sm="8" class="search-button-wrapper">
          <a-button type="primary" icon="search" class="search-button" @click="searchTable()">搜索</a-button>
          <a-button type="primary" icon="reload" class="search-button">重置</a-button>
          <span class="fold" @click="toggleSearchStatus = !toggleSearchStatus">
            <span
              style="margin-right:5px;"
              class="fold-world"
            >{{toggleSearchStatus === false ? '展开': '收起'}}</span>
            <a-icon type="down" :class="toggleSearchStatus===false? '': 'icon-up'" />
          </span>
        </a-col>
      </a-row>
    </a-form>
    <!--操作按钮区域-->
    <div class="table-operator" style="margin-bottom: 18px;">
      <a-button type="primary" icon="download" @click="handleExportXls" style="margin-right: 8px">导出</a-button>
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>
    <!--table开始-->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-locale-provider :locale="zh_CN">
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange"
        >
          <template slot="operation" slot-scope="text,record">
            <a @click="editTableRow(record)">编辑</a>
          </template>
        </a-table>
      </a-locale-provider>
    </div>
    <!--table结束-->
    <!--form表单开始-->
  </div>
</template>
<script>
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
import { constants } from "crypto";

moment.locale("zh-cn");
export default {
  name: "tabs",
  data() {
    return {
      zh_CN,
      //查询区域参数  v-model 会自动给这个对象添加属性   因为该参数只是要在输入框里面使用不需要再页面其他地方渲染出来
      //所以在data里面可以不用写对应的属性
      //当然写上也可以
      queryParams: {},
      selectedRowKeys: [], //指定选中项的 key 数组，需要和 onChange 进行配合
      toggleSearchStatus: false, //切换搜索框区域的状态
      url: {
        //定义页面用到请求的地址
        list: "/threefact/baseHouse/list",
        delete: "/test/joaDemo/delete",
        deleteBatch: "/test/joaDemo/deleteBatch",
        exportXlsUrl: "test/joaDemo/exportXls",
        importExcelUrl: "test/joaDemo/importExcel",
        startProcess: "/process/extActProcess/startMutilProcess"
      },
      //表头
      columns: [
        {
          title: "姓名",
          dataIndex: "name"
        },
        {
          title: "年龄",
          dataIndex: "age"
        },
        {
          title: "生日",
          dataIndex: "birthday"
        },
        {
          title: "操作",
          dataIndex: "operation",
          width: "150px",
          scopedSlots: { customRender: "operation" }
        }
      ],
      //表格数据源
      dataSource: [
        {
          name: "小明",
          age: 10,
          id: 0,
          birthday: "2018-09-25"
        },
        {
          name: "二明",
          age: 11,
          id: 1,
          birthday: "2011-09-25"
        },
        {
          name: "三明",
          age: 10,
          id: 2,
          birthday: "2016-09-25"
        }
      ],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 100
      },
      loading: false
    };
  },
  computed: {
    //计算导出表格的地址
    importExcelUrl: function() {
      return `${this.url.importExcelUrl}`;
    }
  },
  methods: {
    //导出
    handleExportXls() {
      constants.log("导出按钮");
    },
    //导入
    handleImportExcel() {
      console.log("导入按钮");
    },
    //清空当前选中表格里面的条数
    onClearSelected() {
      this.selectedRowKeys = [];
      console.log("清空表头选中的数据");
    },
    //选中项发生变化时的回调
    onSelectChange(selectedRowKeys, selectionRows) {
      console.log(selectedRowKeys);
      console.log(selectionRows);
      // this.selectedRowKeys =
      if (selectedRowKeys.length > 0) {
        this.selectedRowKeys = selectedRowKeys;
      } else {
        this.selectedRowKeys = [];
      }
      console.log("选中项发生变化的回调");
    },
    //	分页、排序、筛选变化时触发
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      this.ipagination = pagination;
      console.log("分页，排序，筛选");
    },
    //编辑表格
    editTableRow(record) {
      console.log("开始编辑表格某一项");
      console.log(record);
    },
    //批量操作里面的删除
    batchDel() {},
    //根据要搜索的字段进行搜索
    searchTable() {
      console.log(this.queryParams);
      var arr = Object.keys(this.queryParams);
      console.log(arr);
    }
  }
};
</script>
<style lang="scss">
.ant-form-inline .ant-form-item > .ant-form-item-control-wrapper {
  flex: 1;
}
</style>

<style lang="scss" scoped>
.ant-form-inline .ant-form-item {
  display: flex;
  margin-bottom: 15px;
}
.search-button-wrapper {
  margin-bottom: 15px;
}
.tabs {
  padding: 20px;
  .search-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .ant-form-inline .ant-form-item {
      display: flex;
    }
    .search-button {
      margin-right: 8px;
    }
    .icon-up {
      transform: rotate(180deg);
      transition: all 0.3s ease;
    }
    .fold {
      color: #1890ff;
      cursor: pointer;
      .fold-world {
        margin-right: 5px;
      }
    }
  }
}
</style>

